<template>
    <div class="pd-30">
        <div class="center">
            <div class="flex w-1280">
                <div class="text-center">
                    <p class="bold size-18">总提现金额</p>
                    <p class="size-16">{{ info.zongTiXianJinEAll }}</p>
                </div>
                <div class="text-center">
                    <p class="bold size-18">可提现金额</p>
                    <p class="size-16">{{ info.keTiXianJinEAll }}</p>
                </div>
                <div class="text-center">
                    <p class="bold size-18">总交付课时</p>
                    <p class="size-16">{{ info.zongJiaoFuKeShiAll }}</p>
                </div>
                <div class="text-center">
                    <p class="bold size-18">未交付课时</p>
                    <p class="size-16">{{ info.weiJiaoFuKeShiAll }}</p>
                </div>
            </div>
        </div>
        <div class="flex mt-20">
            <div class="flex">
                <div class=" center">
                    <p>服务商名称：</p>
                    <el-input class="w-250" v-model="input" placeholder="请输入"></el-input>
                </div>
                <!-- <div class=" center ml-50">
                    <p>地址：</p>
                    <el-input class="w-250" v-model="input2" placeholder="请输入"></el-input>
                </div> -->
                <div class=" center ml-50">
                    <p>手机号：</p>
                    <el-input class="w-250" v-model="input1" placeholder="请输入"></el-input>
                </div>
            </div>
            <div class="flex ml-80">
                <!-- <el-button class="w-100" @click="tixian">提现</el-button> -->
                <el-button class="w-100" @click="chongzhi">重置</el-button>
                <el-button class="w-100" type="primary" @click="getUserList">搜索</el-button>
            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="服务商名称">
            </el-table-column>
            <el-table-column prop="zongTiXianJinE" label="总体现金额">
            </el-table-column>
            <el-table-column prop="keTiXianJinE" label="可提现金额">
            </el-table-column>
            <el-table-column prop="zongJiaoFuKeShi" label="总交付课时">
            </el-table-column>
            <el-table-column prop="weiJiaoFuKeShi" label="未交付课时">
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <!-- <el-button type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <el-button size="mini" @click="getDetail(scope.row)">查看记录</el-button>
                    <!-- <el-button size="mini" @click="getDetail(scope.row,2)">提现</el-button> -->

                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"
                @current-change="sizeChange">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="45%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ selectName }}交易详情</h4>
            </span>
            <div class="flex">
                <div class=" center">
                    <p>交易类型：</p>
                    <el-select class="w-180" v-model="value1" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex ml-80">
                    <el-button class="w-100" @click="chongzhi1">重置</el-button>
                    <el-button class="w-100" type="primary" @click="getList">搜索</el-button>
                </div>
            </div>
            <el-table :data="tableData1" border style="width: 100%" class="mt-30">
                <el-table-column prop="thirdName" label="用户名称">
                </el-table-column>
                <el-table-column prop="userType" label="用户类型" width="180">
                    <template #default="{ row }">
                        <p v-if="row.userType == 1">教师</p>
                        <p v-if="row.userType == 2">交付中心系统</p>
                        <p v-if="row.userType == 3">合伙人系统</p>
                        <p v-if="row.userType == 4">服务商系统</p>
                    </template>
                </el-table-column>
                <el-table-column prop="userType" label="交易类型" width="180">
                    <template #default="{ row }">
                        <p v-if="row.type == 1">分销奖励</p>
                        <p v-if="row.type == 2">体现</p>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="金额">
                </el-table-column>
                <el-table-column prop="submitTime" label="操作时间">
                </el-table-column>
            </el-table>
            <div class="flex mt-20">
                <div></div>
                <el-pagination :current-page="page" background layout="prev, pager, next" :total="total1"
                    @current-change="sizeChange1">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fuWuShangList, fuWuShangAll, fenXiaoLogList,tiXian } from '@/api/financeAdmin.js'
export default {
    name: "Label",
    data() {
        return {
            dialogVisible: false,

            input: '',
            input1: '',
            input2: '',
            tableData: [],
            page: 1,
            total: 0,
            upUrl: this.$upLoadUrl,
            type: '',
            form: {
                address: '',
                beiZhu: '',
                content: '',
                joinNum: '',
                name: '',
                pic: '1',
                time: ''
            },
            selectName: '',
            tableData1: [],
            page1: 1,
            total1: 0,
            info:{},

            options1: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '分销奖励'
            }, {
                value: '2',
                label: '体现'
            }],
            value1: '',
            thirdId: '',
        }
    },
    mounted() {
        this.getUserList()
        this.fuWuShangAll()
    },
    methods: {
        tixian() {
            this.$prompt('请输入提现金额', '提现', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/,
                inputErrorMessage: '请输入正确提现金额'
            }).then(({ value }) => {
                if (value > this.info.keTiXianJinEAll) {
                    this.$message({
                        type: 'error',
                        message: '超出可提现金额'
                    });
                } else {
                    tiXian({
                        amount: value
                    }).then(res => {
                        if (res.code == 0) {
                            this.fuWuShangAll()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg || '提现失败'
                            });
                        }
                    })
                }
            })
        },
        chongzhi1() {
            this.thirdId = ''
            this.value2 = ''
            this.value1 = ''
            this.getList()
        },
        fuWuShangAll() {
            fuWuShangAll().then(res => {
                this.info = res.rows[0]
            })
        },
        sizeChange1(e) {
            this.page1 = e
            this.getUserList()
        },
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        getDetail(e, type) {
            console.log(e, type)
            this.dialogVisible = true
            this.selectName = e.name
            this.thirdId = e.id
            this.getList()
        },
        getList() {
            fenXiaoLogList({
                pageNum: this.page1,
                pageSize: 10,
                thirdId: this.thirdId,
                userType: 4,
                type: this.value1
            }).then(res => {
                this.tableData1 = res.rows
                this.total1 = res.total
            })
        },
        getUserList() {
            fuWuShangList({
                pageNum: this.page,
                pageSize: 10,
                name: this.input,
                address: this.input2
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },


        chongzhi() {
            this.page = 1
            this.input = ''
            this.input1 = ''
            this.input2 = ''

            this.getUserList()
        },
    }
}
</script>